import React, {useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {Button, LinearProgress} from '@rn-vui/themed';
import {RootSiblingPortal} from 'react-native-root-siblings';

const styles = StyleSheet.create({
    backdrop: {
        backgroundColor: 'rgba(0,0,0,0.5)',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
        left: 0,
        top: 0,
        width: '100%',
        height: '100%',
        zIndex: 9999,
    },
    overlayer: {
        width: '80%',
        padding: 20,
        rowGap: 20,
        backgroundColor: 'white',
        borderRadius: 10,
    },
    title: {
        fontSize: 22,
        textAlign: 'center',
    },
    description: {
        fontSize: 18,
        textAlign: 'center',
    },
});

interface ModalUploadingProps {
    onPress?: () => void;
}

const ModalUpdating = (props: ModalUploadingProps, ref: any) => {
    const [progress, setProgress] = useState<number>(0);
    const [visible, setVisible] = useState<boolean>(false);
    const [updating, setUpdating] = useState<boolean>(false);

    React.useImperativeHandle(ref, () => ({
        setProgress: (value: number) => {
            setProgress(value);
        },
        open: () => {
            setVisible(true);
            setUpdating(false);
        },
        close: () => {
            setVisible(false);
        },
        setUpdating: (value: boolean) => {
            setUpdating(value);
        },
    }));

    if (!visible) {
        return null;
    }

    return (
        <RootSiblingPortal>
            <View style={styles.backdrop}>
                <View style={styles.overlayer}>
                    <Text style={styles.title}>更新提示</Text>
                    <Text style={styles.description}>发现新版本，请立即更新</Text>
                    <View style={{paddingVertical: 10}}>
                        <LinearProgress
                            style={{height: 15, borderRadius: 10}}
                            variant={'determinate'}
                            color={'#8E0E0F'}
                            trackColor={'#ccc'}
                            value={progress}
                        />
                    </View>
                    <Button
                        title={'立即更新'}
                        onPress={() => props.onPress?.()}
                        disabled={updating}
                        loading={updating}
                    />
                </View>
            </View>
        </RootSiblingPortal>
    );
};

export default React.forwardRef(ModalUpdating);
